---
title: Authenticator
description: Authenticator component adds complete authentication flows to your application with minimal boilerplate.
supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte
---

import { InlineFilter } from '@/components/InlineFilter';
import AppDirectoryAlert from '@/components/AppDirectoryAlert';
import { MigrationGuideCallout } from '@/components/MigrationChanges/MigrationGuideCallout';

import { Alert, Tabs } from '@aws-amplify/ui-react';
import { NextSteps } from './NextSteps';
import { FRAMEWORKS } from '@/data/frameworks';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import WebIntro from './intro.web.mdx';
import AndroidIntro from './intro.android.mdx';
import FlutterIntro from './intro.flutter.mdx';
import ReactNativeIntro from './intro.react-native.mdx';
import SwiftIntro from './intro.swift.mdx';
import QuickStart from './quick-start.mdx';
import QuickStartAngular from './quick-start.angular.mdx';
import QuickStartVue from './quick-start.vue.mdx';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<InlineFilter filters={['angular']}>
  <MigrationGuideCallout framework="angular"/>
  <WebIntro />
</InlineFilter>
<InlineFilter filters={['react']}>
  <MigrationGuideCallout framework="react" />
  <WebIntro />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <MigrationGuideCallout framework="vue" />
</InlineFilter>
<InlineFilter filters={['android']}>
  <AndroidIntro />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <FlutterIntro />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <MigrationGuideCallout framework="react-native" />
  <ReactNativeIntro />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <SwiftIntro />
</InlineFilter>

## Quick start

<InlineFilter filters={['react']}>
  <AppDirectoryAlert />
</InlineFilter>


### Setup with Amplify Gen 2 backend
<InlineFilter filters={['react']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/react/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['angular']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/angular/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['vue']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/vue/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['react-native']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/react-native/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['flutter']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/flutter/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['android']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/android/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['swift']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/swift/start/quickstart/).
</InlineFilter>
<InlineFilter filters={['svelte']}>
To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/swift/start/quickstart/).
</InlineFilter>

### Setup with Amplify Gen 1 backend
To setup Amplify using the Gen1 CLI, follow the steps below:


<InlineFilter filters={['android', 'flutter', 'react', 'react-native', 'swift', 'svelte']}>
  <QuickStart />
</InlineFilter>

<InlineFilter filters={['angular']}>
  <QuickStartAngular />
</InlineFilter>

<InlineFilter filters={['vue']}>
  <QuickStartVue />
</InlineFilter>

<NextSteps />
